<template>
  <el-scrollbar>
    <div class="login-page-box">
      <h1>{{ title }}</h1>
      <div class="container">
        <div class="form-info">
          <div class="info">
            <div class="img-box"><img src="@/assets/images/login-img.png" alt="" /></div>
            <form action="#">
              <div class="input-group">
                <span class="icon-box">
                  <du-icon type="user" theme="outline" size="16" fill="#999" />
                </span>
                <input v-model="uid" type="text" placeholder="请输入账号" />
              </div>
              <div class="input-group">
                <span class="icon-box">
                  <du-icon type="lock" theme="outline" size="16" fill="#999" />
                </span>
                <input v-model="password" type="password" autocomplete placeholder="请输入密码" />
              </div>
              <div class="code-group">
                <span class="icon-box">
                  <du-icon type="protect" theme="outline" size="16" fill="#999" />
                </span>
                <div class="code-input-box">
                  <input v-model="code" type="text" placeholder="请输入验证码" />
                </div>
                <div>123</div>
              </div>

              <el-button type="primary" size="large" style="width: 100%" :loading="loading" @click="toLogin"
                >登录</el-button
              >
            </form>
          </div>
        </div>
      </div>
      <div class="footer">
        <p>
          © 2022 Service login form. All Rights Reserved | Design by
          <a href="https://www.baidu.com/" target="blank">DUJUNHUI</a>
        </p>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import { defineComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useGlobal } from '../../hooks/system/useGlobal'
import { addMenuRoutes } from '@/router'

import { useLogin } from '../../hooks/system/useAuth.js'
const { login } = useLogin()

export default defineComponent({
  name: 'LoginCom',
  setup() {
    const { globalProperties } = useGlobal()
    const title = globalProperties.$config.systemTitle
    console.log('login.vue', globalProperties.$router)
    console.log('login.vue', globalProperties.$router.getRoutes())
    const uid = ref('')
    const password = ref('')
    const code = ref('')
    const router = useRouter()
    const route = useRoute()
    const loading = ref(false)

    const toLogin = () => {
      loading.value = true
      login({
        uid: uid.value,
        password: password.value,
        code: code.value,
      })
        .then(() => {
          ElMessage.success({
            message: '登录成功',
            type: 'success',
            showClose: true,
            duration: 1000,
          })
        })
        .catch((e) => {
          console.log('这是login.vue', e)
          loading.value = false
        })
    }

    return {
      title,
      uid,
      password,
      code,
      toLogin,
      loading,
    }
  },
})
</script>

<style lang="scss" scoped>
div,
h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
form,
input {
  box-sizing: border-box;
}
form {
  border: 0;
  padding: 0;
  margin: 0;
}
input {
  font-size: 14px;
  font-weight: 500;
  color: #999;
  text-align: left;
  padding: 14px 15px 12px 35px;
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: transparent;
  letter-spacing: 0.5px;
}
.login-page-box {
  background-color: #f1f1f1;
  padding: 40px 40px;
  justify-content: center;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  min-height: 100vh;
  h1 {
    text-align: center;
    font-size: 34px;
    font-weight: 500;
    color: #3b3663;
  }
  .container {
    max-width: 890px;
    margin: 0 auto;
  }
  .footer {
    p {
      text-align: center;
      font-size: 12px;
      line-height: 24px;
      color: #777;
    }
  }
}

.form-info {
  margin: 40px 0;
  .info {
    display: flex;
    box-sizing: border-box;
    padding: 3em 3.5em;
    width: 800px;
    background: #fff;
    box-shadow: 2px 9px 49px -17px rgb(0 0 0 / 10%);
    .img-box {
      margin-right: 60px;
    }
    form {
      flex: 1;
      .input-group {
        margin-bottom: 20px;
        padding: 0;
        border-bottom: 1px solid #e5e5e5;
        position: relative;
      }
    }
  }
  .code-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    position: relative;
    .code-input-box {
      flex: 1;
      border-bottom: 1px solid #ddd;
      margin-right: 10px;
    }
  }
  .login-btn {
    display: block;
    margin: 0 auto;
    color: #fff;
    background-color: var(--el-color-primary);
    margin-top: 30px;
    outline: none;
    width: 100%;
    padding: 15px 15px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    border-radius: 3px;
    border: none;
    text-transform: capitalize;
  }
}

.icon-box {
  position: absolute;
  left: 0;
  top: 12px;
}

// 去掉chrome的登陆input自带填充样式
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
</style>
